<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>财富管理中心</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <#include "public/css.ftl">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<#include "public/tip.ftl">
<div class="wrapper">
  <#include "public/header.ftl">
  <!-- Left side column. contains the logo and sidebar -->
  <#include "public/aside.ftl">
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Data Tables
        <small>advanced tables</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li class="active">#</li>
        <li class="active">#</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content"> 
      <div class="row">
        <div class="col-xs-12"> 
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">信用卡列表</h3>

            </div>
            <div class="box-body">
                <div id="toolbar">
                    <div class="form-inline" role="form">
                        <div class="form-group">
                            <input id="occurDate" class="form-control" placeholder="日期" onClick="WdatePicker()" >
                        </div>
                        <button id="ok" type="button" class="btn btn-default" onclick="search()">OK</button>
                    </div>
                </div>
                <table id="creditCardTable" data-toggle="table" data-url="/creditcard/list"  data-toolbar="#toolbar"
                       class=".table-responsive table text-nowrap" data-query-params="queryParams" data-search="true"
                       data-pagination="true" data-sort-name="totalAmount" data-sort-order="desc">
                    <thead>
                    <tr>
                        <th data-field="bankName">银行名称</th>
                        <th data-field="cardName">卡名称</th>
                        <th data-field="statementDate" data-formatter="statementDateFormatter">还款日期</th>
                        <th data-field="totalAmount">总额度</th>
                        <th data-field="finishAmount">已使用额度</th>
                        <th data-field="totalAmount" data-formatter="residueAmountFormatter">剩余额度</th>
                        <th data-field="deadline" data-formatter="statementDateFormatter">最晚还款日</th>
                        <th data-field="code">卡号</th>
                        <th data-field="cvv2">cvv2</th>
                        <th data-field="cvv2">图片</th>
                        <th data-field="cvv2">cvv2</th>
                    </tr>
                    </thead>
                </table>
            </div>
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
<#include "public/footer.ftl" >
  <div class="control-sidebar-bg"></div>
</div>
<#include "public/js.ftl" >
<script src="dist/js/datepicker/WdatePicker.js" language="javascript" type="text/javascript" ></script>
<script>
    function search(){
        $("#batchTable").bootstrapTable('refresh');
    }
    function residueAmountFormatter(value, row, index) {
        return row.totalAmount - row.finishAmount;
    }
    function statementDateFormatter(value, row, index) {
        return "每月" +value + "日";
    }
    function queryParams(){
        return {
            occurDate:$("#occurDate").val()
        };
    }
</script>
</body>
</html>
